<!--  
 +---------------------------------------------------------------------- 
 | 狂团[kt8.cn]旗下KtAdmin是为独立版SAAS系统而生的快速开发框架. 
 +---------------------------------------------------------------------- 
 | [KtAdmin] Copyright (c) 2022 http://ktadmin.cn All rights reserved. 
 +---------------------------------------------------------------------- 
 | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) 
 +----------------------------------------------------------------------  
-->

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { sensitivelexiconsave, getsystemreview, systemquestionset, systemreplyset } from '@/api'
import bottomCopyringht from '../../../components/bottom-copyright.vue'
let form1 = reactive({
	word: ''
})
let form2 = reactive({
	question_system: '',
	question_deal: '',
	question_reply: ''
})
let form3 = reactive({
	reply_system: '',
	reply_deal: '',
	reply_reply: ''
})

const token = ref(JSON.parse(localStorage.agenttoken).data)
const ruleFormRef1 = ref()
const ruleFormRef2 = ref()
const ruleFormRef3 = ref()

const submitForm1 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			sensitivelexiconsave(form1).then((res) => {
				ElMessage({ message: '保存成功', type: 'success' })
				form1.word = ''
			})
		} else {
			ElMessage({ message: '保存失败', type: 'error' })
		}
	})
}

const submitForm2 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			systemquestionset(form2).then((res) => {
				ElMessage({ message: '保存成功', type: 'success' })
				getreview()
			})
		} else {
			ElMessage({ message: '保存失败', type: 'error' })
		}
	})
}

const submitForm3 = async (formEl) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			systemreplyset(form3).then((res) => {
				console.log(res)
				ElMessage({ message: '保存成功', type: 'success' })
				getreview()
			})
		} else {
			ElMessage({ message: '保存失败', type: 'error' })
		}
	})
}

const resetForm1 = (formEl) => {
	if (!formEl) return
	formEl.resetFields()
}

const rules = reactive({
	word: [{ required: true, message: '请输入敏感词', trigger: 'blur' }]
})
const rules1 = reactive({
	question_system: [{ required: true, message: '请选择系统词库审核', trigger: 'change' }],
	question_deal: [{ required: true, message: '请选择处理方式', trigger: 'change' }],
	question_reply: [{ required: true, message: '默认回复不能为空', trigger: 'blur' }]
})
const rules2 = reactive({
	reply_system: [{ required: true, message: '请选择系统词库审核', trigger: 'change' }],
	reply_deal: [{ required: true, message: '请选择处理方式', trigger: 'change' }],
	reply_reply: [{ required: true, message: '默认回复不能为空', trigger: 'blur' }]
})

const list = reactive(['敏感词库', '提问审核', '回复审核'])
const currentIndex = ref(0)
const change = (index, item) => {
	currentIndex.value = index
	if (index > 0) {
		getreview()
	}
}
const getreview = async () => {
	const data = await getsystemreview()
	for (const key in data.data) {
		if (form2[key] != undefined) {
			form2[key] = data.data[key]
		}
		if (form3[key] != undefined) {
			form3[key] = data.data[key]
		}
	}
}
onMounted(() => {
	getreview()
})
</script>
<template>
	<div style="min-height: 700px">
		<div class="topTabStyle">
			<div class="tabStyleChild">
				<div :class="{ tabSelect: index === currentIndex }" v-for="(item, index) in list" @click="change(index, item)">
					{{ item }}
				</div>
			</div>
			<div v-if="currentIndex == 0" class="cardContent">
				<div class="cardTabTop">
					<div class="cardTabTop1"></div>
					<div class="cardTabTop2">新增敏感词</div>
				</div>
				<div class="cardFormStyle">
					<el-form :rules="rules" ref="ruleFormRef1" :model="form1" label-width="120px" style="margin-top: -5px">
						<el-form-item label="敏感词 " prop="word">
							<el-input v-model="form1.word" />
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div v-else-if="currentIndex == 1" class="cardContent">
				<div class="cardTabTop">
					<div class="cardTabTop1"></div>
					<div class="cardTabTop2">{{ list[currentIndex] }}设置</div>
				</div>

				<div class="cardFormStyle">
					<el-form :rules="rules1" ref="ruleFormRef2" :model="form2" label-width="120px">
						<el-form-item label="系统词库审核" prop="question_system">
							<el-radio-group v-model="form2.question_system" class="ml-4">
								<el-radio :label="1" size="large">开启</el-radio>
								<el-radio :label="0" size="large">关闭</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="处理方式 " prop="question_deal">
							<el-radio-group v-model="form2.question_deal" class="ml-4">
								<el-radio :label="1" size="large">阻止提交（默认）</el-radio>
								<el-radio :label="2" size="large">关键词替换成*** （无回复内容）</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item v-show="form2.question_deal === 1" label="默认回复" prop="question_reply">
							<el-input v-model="form2.question_reply" />
						</el-form-item>
					</el-form>
				</div>
			</div>

			<div v-if="currentIndex == 2" class="cardContent">
				<div class="cardTabTop">
					<div class="cardTabTop1"></div>
					<div class="cardTabTop2">{{ list[currentIndex] }}设置</div>
				</div>
				<div class="cardFormStyle">
					<el-form style="position: relative" :rules="rules2" ref="ruleFormRef3" :model="form3" label-width="120px">
						<el-form-item label="系统词库审核" prop="reply_system">
							<el-radio-group v-model="form3.reply_system" class="ml-4">
								<el-radio :label="1" size="large">开启</el-radio>
								<el-radio :label="0" size="large">关闭</el-radio>
							</el-radio-group>
							<p style="color: darkgray; font-size: 12px; position: absolute; bottom: -24px; left: 0">
								开启后会略微牺牲回复速度
							</p>
						</el-form-item>
						<el-form-item label="处理方式 " prop="reply_deal">
							<el-radio-group v-model="form3.reply_deal" class="ml-4">
								<el-radio :label="1" size="large">阻止提交（默认）</el-radio>
								<el-radio :label="2" size="large">关键词替换成*** （无回复内容）</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item v-show="form3.reply_deal === 1" label="默认回复" prop="reply_reply">
							<el-input v-model="form3.reply_reply" />
						</el-form-item>
					</el-form>
				</div>
			</div>

			<!-- 按钮 -->
			<div></div>
		</div>
		<div class="bottomButton" v-if="currentIndex == 0">
			<el-button type="primary" @click="submitForm1(ruleFormRef1)">保存</el-button>
		</div>
		<div class="bottomButton" v-else-if="currentIndex == 1">
			<el-button type="primary" @click="submitForm2(ruleFormRef2)">保存</el-button>
		</div>
		<div class="bottomButton" v-else-if="currentIndex == 2">
			<el-button type="primary" @click="submitForm3(ruleFormRef3)">保存</el-button>
		</div>
	</div>
	<bottom-copyringht style="margin-bottom: 80px"></bottom-copyringht>
</template>
<style>
.el-input {
	border: none;
}
</style>
<style scoped>
.topTabStyle {
	position: relative;
	height: 65px;
	margin: 20px;
	background: #ffffff;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 15px;
}

.tabStyleChild {
	width: 280px;
	height: 65px;
	line-height: 65px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #8c8c8c;
	margin-left: 40px;
	display: flex;
	justify-content: space-between;
}

.tabSelect {
	text-align: center;
	color: #208eff;
	border-bottom: 2px solid #208eff;
}

.cardContent {
	height: calc(100vh - 300px);
	background: #ffffff;
	margin-top: 20px;
	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
	border-radius: 8px;
	margin-bottom: 80px;
	overflow: auto;
}

.el-form-item {
	margin-bottom: 24px;
	align-items: center;
}

.cardTabTop {
	height: 66px;
	display: flex;
	margin-left: 25px;
	margin-top: 24px;
	padding-top: 23px;
	justify-content: flex-start;
}
.cardTabTop1 {
	width: 4px;
	height: 14px;
	background: #208eff;
}

.cardTabTop2 {
	/* width: 70px; */
	height: 14px;
	margin-left: 8px;
	font-size: 14px;
	font-family: PingFang-SC-Medium, PingFang-SC;
	font-weight: 500;
	color: #333333;
	line-height: 14px;
}

.cardFormStyle {
	width: 520px;
	padding-bottom: 24px;
	margin-left: 115px;
}

.bottomButton {
	position: fixed;
	bottom: 0;
	width: 100%;
	line-height: 60px;
	text-align: center;
	padding-right: 100px;
	height: 60px;

	background-color: #ffffff;
}
</style>
